<script setup>
import { RouterLink, RouterView } from 'vue-router'
import 'animate.css'
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <!-- <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink> -->
        <router-link to="/" class="routerLink">首页</router-link>
        <router-link to="/login" class="routerLink">登录</router-link>
        <router-link to="/rejist" class="routerLink">注册</router-link>
      </nav>
    </div>
  </header>
  <router-view v-slot="{ Component }">
    <transition enter-active-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutRight" mode="out-in">
      <component :is="Component">
      </component>
    </transition>
  </router-view>
</template>

<style scoped>
header {
  text-align: center;
}

.routerLink {
  text-decoration: none;
  margin-left: 20px;
}
</style>
